import React,{Component} from 'react';
import { 
	StyleSheet, 
	View, Text, 
	Image, 
	ActivityIndicator, 
	TouchableWithoutFeedback, 
	TouchableNativeFeedback,
	ScrollView, 
	StatusBar, 
	FlatList 
} from 'react-native';
import ScrollableTabView, {DefaultTabBar} from 'react-native-scrollable-tab-view';
export default class NewsList extends Component {
	constructor(props) {
        super(props);
        this.state = {
            hasData: false,
            isLoading: 0,
            activeTab: 0,
            isLoad: false,
            topImage: 'http://imgwww.heiguang.net/f/2013/0415/20130415032720155.jpg',
            index: 20,
            newsList: []
        };
    }

    componentDidMount(){
        fetch('https://result.eolinker.com/XPZsElz98c92f9c243e2f760bf17420ef24906430bea331?uri=lindf.com',
            {
                method: 'POST',
            }
        )
        .then((response) => response.json())        // json方式解析，如果是text就是 response.text()
        .then((responseData) => {   // 获取到的数据处理
            this.setState({
                newsList: responseData.result.lists,
            },function(){
                this.setState({
                    hasData: true
                })
                console.log(this.state.newsList)
            });

        })
        .catch((error) => {     // 错误处理
            alert(error);
        })
        .done();
    }

	_onRefresh(){
        this.setState({
            isLoad: !this.state.isLoad
        },function(){
            setTimeout(()=>{
                this.setState({
                    isLoad: !this.state.isLoad
                });
            },2000)
        });
        
    }

    _bottomComponent(){
        if(this.state.isLoading==0){
            return (
                <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                    <Text style={{lineHeight: 30}}>点击加载更多</Text>
                </View>
            )
        }else if(this.state.isLoading==1){
            return (
                <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                    <Text style={{lineHeight: 30}}>加载中...</Text>
                </View>
            )
        }else if(this.state.isLoading==2){
            return (
                <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                    <Text style={{lineHeight: 30}}>暂无数据</Text>
                </View>
            )
        }
    }

    chooseTab(index){
        this.setState({
            page: index
        });
    }

    _tabChoose(index){
        this.setState({
            activeTab: index,
            page: index
        });
    }

	render() {
		const { params } = this.props.navigation.state;
        const {navigate,goBack,state} = this.props.navigation;
		return (
			<View style={styles.box}>
                <View style={styles.nav}>
                    <TouchableWithoutFeedback onPress={()=>goBack()}>
                        <View style={{paddingRight: 10,paddingTop: 5,paddingBottom: 5,}}>
                            <Image style={{
                                width: 12,
                                height: 22,
                            }} source={require('../images/backBtn.png')}/>
                        </View>
                    </TouchableWithoutFeedback>
                    <View style={{flexDirection: 'row',alignItems: 'center'}}>
                    	<TouchableWithoutFeedback onPress={()=>this.chooseTab(0)}>
                            {
                                this.state.activeTab==0?
                                <View style={{alignItems: 'center',paddingLeft: 4,paddingRight: 4}}>
                                    <Text style={styles.normalTextActive}>全部</Text>
                                    <View style={styles.normalViewActive}></View>
                                </View>
                                :
                                <View style={{alignItems: 'center',paddingLeft: 4,paddingRight: 4}}>
                                    <Text style={styles.normalText}>全部</Text>
                                    <View style={styles.normalView}></View>
                                </View>
                            }
						</TouchableWithoutFeedback>
						<TouchableWithoutFeedback onPress={()=>this.chooseTab(1)}>
                            {
                                this.state.activeTab==1?
                                <View style={{alignItems: 'center',paddingLeft: 4,paddingRight: 4}}>
                                    <Text style={styles.normalTextActive}>最热</Text>
                                    <View style={styles.normalViewActive}></View>
                                </View>
                                :
                                <View style={{alignItems: 'center',paddingLeft: 4,paddingRight: 4}}>
                                    <Text style={styles.normalText}>最热</Text>
                                    <View style={styles.normalView}></View>
                                </View>
                            }
						</TouchableWithoutFeedback>
                    </View>
                    <View style={{width: 32,height: 32}}></View>
                </View>

                <ScrollableTabView
                    // 默认选项卡栏下划线的样式
                    tabBarUnderlineStyle={{height: 2, backgroundColor: '#0000ff'}}
                    // 默认标签栏背景的颜色，默认为white
                    tabBarBackgroundColor={'white'}
                    // 选中时默认标签栏文本的颜色，默认为navy
                    tabBarActiveTextColor={'#0000ff'}
                    // 不选中时默认标签栏文本的颜色，默认为black
                    tabBarInactiveTextColor={'black'}
                    // 标签栏文本的其他样式
                    tabBarTextStyle={{fontSize: 14, fontWeight: 'normal'}}
                    // 最初选择的选项卡的索引，默认为0 ===第一个选项卡
                    initialPage={this.state.page}
                    // 动态设置选项卡的索引
                    page={this.state.page}
                    // TabBar组件
                    renderTabBar={() => <View></View>}
                    // 当选项卡更改时调用的函数。i：页面下标，ref：所选标签的引用
                    // onChangeTab={(obj)=>console.log(obj.i,obj.ref)}
                    onChangeTab={(obj)=>this._tabChoose(obj.i)}
                    // 页面滑动时调用的函数。num：选项卡所处的位置
                    onScroll={(num)=>console.log(num)}
                >
            		<FlatList
                        tabLabel='全部'
                        extraData={this.state}
                        initialNumToRender={10}
                        data={this.state.newsList}
                        style={{backgroundColor: '#eee'}}
                        // 给数组的每一项指定key，避免不必要的render
                        keyExtractor={(item, index) => item.id}
                        // 设置下拉刷新功能的状态
                        refreshing={ this.state.isLoad }
                        // 头部组件
                        // ListHeaderComponent={this._headerComponent}
                        // 尾部组件
                        ListFooterComponent={this._bottomComponent.bind(this)}
                        // 给组件设置下拉刷新功能
                        onRefresh={this._onRefresh.bind(this)}
                        // onEndReachedThreshold={0.01}
                        // onEndReached={this._onEndReached.bind(this)}
                        // 渲染数组组件
                        renderItem={({item}) => {
                            return (
                                this.state.hasData?
                                <TouchableWithoutFeedback onPress={()=>navigate('NewsDetail')}>
                                        <View style={{backgroundColor: '#fff',paddingLeft: 15,paddingRight: 10}}>
                                            <View style={{ flexDirection: 'row',borderBottomWidth: 1, borderColor: '#eeeeee', paddingTop: 15,paddingBottom: 10}}>
                                                <View style={{flex: 1, justifyContent: 'space-between',paddingRight: 10}}>
                                                    <Text numberOfLines={3} style={{fontSize: 13, color: '#707070',lineHeight: 17}}>我是林帅帅我是林帅帅我是林帅帅我是林帅帅我是林帅帅我是林帅帅我是林帅帅我是林帅帅我是林帅帅我是林帅帅</Text>   
                                                    <View style={{flexDirection: 'row',justifyContent: 'space-between'}}>
                                                        <Text style={{fontSize: 12, color: '#707070',lineHeight: 17}}>发布 4小时前</Text>
                                                        <Text style={{fontSize: 12, color: '#707070',lineHeight: 17}}>666看过</Text>
                                                    </View> 
                                                </View>
                                                
                                                <View style={{width: '42%'}}>
                                                    <Image style={{
                                                        width: '100%',
                                                        height: 87,
                                                        borderRadius: 5,
                                                    }} source={{uri: this.state.topImage}} />
                                                </View>
                                            </View>
                                        </View>
                                    </TouchableWithoutFeedback>
                                :
                                null
                            )
                        }}
                    />
                    <FlatList
                        tabLabel='最热'
                        extraData={this.state}
                        initialNumToRender={10}
                        data={this.state.newsList}
                        style={{backgroundColor: '#eee'}}
                        // 给数组的每一项指定key，避免不必要的render
                        keyExtractor={(item, index) => item.id}
                        // 设置下拉刷新功能的状态
                        refreshing={ this.state.isLoad }
                        // 头部组件
                        // ListHeaderComponent={this._headerComponent}
                        // 尾部组件
                        ListFooterComponent={this._bottomComponent.bind(this)}
                        // 给组件设置下拉刷新功能
                        onRefresh={this._onRefresh.bind(this)}
                        // onEndReachedThreshold={0.01}
                        // onEndReached={this._onEndReached.bind(this)}
                        // 渲染数组组件
                        renderItem={({item}) => {
                            return (
                                this.state.hasData?
                                <TouchableWithoutFeedback onPress={()=>navigate('NewsDetail')}>
                                        <View style={{backgroundColor: '#fff',paddingLeft: 15,paddingRight: 10}}>
                                            <View style={{ flexDirection: 'row',borderBottomWidth: 1, borderColor: '#eeeeee', paddingTop: 15,paddingBottom: 10}}>
                                                <View style={{flex: 1, justifyContent: 'space-between',paddingRight: 10}}>
                                                    <Text numberOfLines={3} style={{fontSize: 13, color: '#707070',lineHeight: 17}}>我是林帅帅我是林帅帅我是林帅帅我是林帅帅我是林帅帅我是林帅帅我是林帅帅我是林帅帅我是林帅帅我是林帅帅</Text>   
                                                    <View style={{flexDirection: 'row',justifyContent: 'space-between'}}>
                                                        <Text style={{fontSize: 12, color: '#707070',lineHeight: 17}}>发布 4小时前</Text>
                                                        <Text style={{fontSize: 12, color: '#707070',lineHeight: 17}}>666看过</Text>
                                                    </View> 
                                                </View>
                                                
                                                <View style={{width: '42%'}}>
                                                    <Image style={{
                                                        width: '100%',
                                                        height: 87,
                                                        borderRadius: 5,
                                                    }} source={{uri: this.state.topImage}} />
                                                </View>
                                            </View>
                                        </View>
                                    </TouchableWithoutFeedback>
                                :
                                null
                            )
                        }}
                    />
                </ScrollableTabView>
            </View>
		)
	}
}
const styles = StyleSheet.create({
	box: {
		// paddingTop: StatusBar.currentHeight, 
		backgroundColor: '#fff', 
		position: 'absolute',
		left: 0, 
		top: 0,
		right: 0,
		bottom: 0
	},
	nav: {
    	height: 44, backgroundColor: '#fff', 
    	paddingLeft: 15, 
    	paddingRight: 15, 
    	paddingTop: 6, 
    	paddingBottom: 6,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        borderBottomWidth: 1,
        borderColor: '#eeeeee',
    },
    normalText:{
    	fontSize: 16, 
    	color: '#a0a0a0',
    	marginBottom: 3
    },
    normalTextActive:{
    	fontSize: 16, 
    	color: '#535353',
    	marginBottom: 3
    },
    normalView:{
    	height: 3,
    	width: 12, 
    	borderRadius: 10, 
    	backgroundColor: '#fff'
    },
    normalViewActive:{
    	height: 3,
    	width: 12, 
    	borderRadius: 10, 
    	backgroundColor: '#0130d3'
    }
});